<template>
  <VirtualTable
    :headerCellStyle="headerCellStyle"
    :rowStyle="rowStyle"
    rowKey="pn"
    :table="tableData"
  >
    <Cell label="基本信息">
      <Cell label="pn" prop="pn"></Cell>
      <Cell label="usage" prop="usage"></Cell>
      <Cell label="Commodity" prop="commodity"></Cell>
      <Cell label="Part Name" prop="partName"></Cell>
      <Cell label="Unit Cost" prop="unitCost"></Cell>
      <Cell label="Total Cost" prop="totalCost"></Cell>
    </Cell>

    <Cell v-for="(item, index) in childLength" :key="index" :label="'Supplier#' + (index + 1)">
      <Cell label="Supplier">
        <template slot-scope="scope">
          {{ isEmpty(scope.row.supplierInfo, index, 'supplierCode') }}
        </template>
      </Cell>
      <Cell label="Quota">
        <template slot-scope="scope">
          {{ isEmpty(scope.row.supplierInfo, index, 'quota') }}
        </template>
      </Cell>

      <Cell label="Cost">
        <template slot-scope="scope">
          {{ isEmpty(scope.row.supplierInfo, index, 'supplierCost') }}
        </template>
      </Cell>
    </Cell>
  </VirtualTable>
</template>
<script>
import Cell from '@/widgets/VirtualTable/Cell'
import VirtualTable from '@/widgets/VirtualTable/Table'
export default {
  name: 'CalcDetailTable',
  components: { Cell, VirtualTable },
  props: {
    tableData: {
      type: Array,
      require: true
    },
    childLength: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 颜色分层
      colorData: {
        0: '#ffd966',
        1: '#E0FFFF',
        2: '#90EE90',
        3: '#FFDEAD',
        4: '#FFFAF0',
        5: '#F5F5F5'
      }
    }
  },
  computed: {
    isEmpty() {
      return (info, index, property) => {
        return info && info[index] ? info[index][property] : ''
      }
    }
  },
  created() {},
  methods: {
    headerCellStyle({ td }) {
      for (const k in this.colorData) {
        if (String(td.id).startsWith(k)) {
          return {
            backgroundColor: this.colorData[k],
            color: '#333333'
          }
        }
      }
    },
    rowStyle(index) {
      if (index === 0 || index === 1) {
        return {
          backgroundColor: '#FFC1C1'
        }
      }
    }
  }
}
</script>
<style scoped></style>
